import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { withRouter, Route, Switch } from 'react-router-dom';
import { RouteLayout } from 'weaver-mobile-page';

import PersonList from './PersonList';
import Urgent from './Urgent';

@withRouter
@inject('resultStore')
@observer
export default class ResultModal extends Component {

  render() {
    const { joinPersonLayout, notjoinPersonLayout, answerLayout, viewLayout, optionLayout, othersLayout, urgentLayout } = this.props.resultStore;
    return (
      <Switch>
        <Route
          key={joinPersonLayout.id}
          path={joinPersonLayout.path}
          render={() => (
            <RouteLayout>
              <div key="join" className="wm-route-layout">
                <PersonList />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={notjoinPersonLayout.id}
          path={notjoinPersonLayout.path}
          render={() => (
            <RouteLayout>
              <div key="notjoin" className="wm-route-layout">
                <PersonList />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={answerLayout.id}
          path={answerLayout.path}
          render={() => (
            <RouteLayout>
              <div key="answer" className="wm-route-layout">
                <PersonList />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={viewLayout.id}
          path={viewLayout.path}
          render={() => (
            <RouteLayout>
              <div key="view" className="wm-route-layout">
                <PersonList />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={optionLayout.id}
          path={optionLayout.path}
          render={() => (
            <RouteLayout>
              <div key="option" className="wm-route-layout">
                <PersonList />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={othersLayout.id}
          path={othersLayout.path}
          render={() => (
            <RouteLayout>
              <div key="others" className="wm-route-layout">
                <PersonList />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={urgentLayout.id}
          path={urgentLayout.path}
          render={() => (
            <RouteLayout>
              <div key="urgent" className="wm-route-layout">
                <Urgent />
              </div>
            </RouteLayout>
          )}
        />
      </Switch>
    )
  }
}